<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <h2>商品价格:{{formatPrice}}</h2>
    <h2>商品价格:{{formatPrice2()}}</h2>
    <h2>商品价格:{{price | filterA | filterB(3)}}</h2>
</div>

<div id="app2">
    <h2>商品价格:{{price | filterA | filterB(3)}}</h2>
</div>


<script>

    //配置全局的过滤器
    Vue.filter('filterA' , function (val){
        if(val === null || val === undefined || val === ''){
            return ''
        }
        return val
    })

    Vue.filter('filterB' , function (val , number){
        return val.toFixed(number)
    })

     const vm2 = new Vue({
             el : '#app2',
             //Model M
             data : {
                 price: 21.3
             }
         })

     const vm = new Vue({
             el : '#app',
             //Model M
             data : {
                 msg : '过滤器',
                 price : 50.6
             },
             methods : {
               formatPrice2(){
                   if(this.price === '' || this.price === undefined || this.price === null){
                        return '-'
                   }
                   return this.price
               }
             },
            computed : {
                 //定义格式化价格的计算属性
                 formatPrice(){
                     //对计算属性的值做判断
                     if(this.price === '' || this.price === undefined || this.price === null){
                        return '-'
                     }
                     return this.price
                 }
            },
            // filters : {
            //      //局部过滤器
            //     filterA(val){
            //         if(val === null || val === undefined || val === ''){
            //             return '-'
            //         }
            //         return val
            //     },
            //     filterB(val , number){
            //         //确保传递过来val,保留两位小数
            //         return val.toFixed(number)
            //     }
            // }
         })
</script>
</body>
</html>